<template>
  <div class="home">
    Home
    <hr>
    <button v-on:click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">hello</p>
    </transition>
    <hr>
    <transition name="slide-fade">
      <p v-if="show">hello</p>
    </transition>
    <hr>
    <transition name="bounce">
        <p v-if="show">动画</p>
    </transition>
    <hr>
    <transition
      name="abc"
      enter-active-class="animated pulse"
      leave-active-class="animated bounceOutRight">
      <p v-if="show">自定义样式--引用动画库</p>
    </transition>  
    <hr>
    <!-- <router-link to="/user/aa?a=1#abc=1">aa</router-link>
    <router-link to="/user/bb?b=2#abc=2">bb</router-link> -->
    <router-link to="/user" active-class="router-link-active">user</router-link>
    <button @click="$router.push('/foo')">jump</button>
    <router-link to="/abc" active-class="active">abc</router-link>
    <!-- <router-link to="/foo/aa">foo</router-link>
    <router-link to="/bar">bar</router-link> -->
    <hr>
    <router-view></router-view>
    <router-view name="a" class="aaa"></router-view>
    <router-view name="b" class="bbb"></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    };
  }
};
</script>

<style>
.home {
  text-align: center;
}
.aaa{
  background-color: #f00;
}
.bbb{
  background-color: #00f;
}
/* 过渡1 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
/* 过渡2 */
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}
/* 动画 */
.bounce-enter-active {
  animation: bounce1 .5s;
}
.bounce-leave-active {
  animation: bounce1 .5s reverse;
}
@keyframes bounce1 {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>
